<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <base href="<%=basePath%>"/>
  <%@include file="/WEB-INF/views/common/common.jsp"%>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>测试系统</title>
  <script type="text/javascript">
    $(function(){
      $("#mainMenu").tree({
        url:"menu/loadTree",
        onClick:function(node){
          console.debug(node);
          //判断是否是一级菜单，如果是 不做事情 没有儿子菜单
          if(node.url){
            //跳转到对应页面的URL
            var url = node.url;
            var text = node.text;
            var iconCls = node.iconCls;
            //同一个菜单，可以多次点击，创建相同的页面。期望效果，没有就创建，有就选中
            if($("#mainUI").tabs("exists",text)){
              //有就选中 select
              $("#mainUI").tabs("select",text)
            }else{
              //创建内容区域的一个页面
              $("#mainUI").tabs("add",{
                title:text,
                iconCls:iconCls,
                closable:true,
                //页面里面远程加载数据。。。。。只加载body部分，头部没有。在头部实现的功能没有了
                // href:"/02_datagrid/datagrid.jsp"
                content:'<iframe frameborder="no" src="'+url+'" width="100%" height="100%"></iframe>'
              });
            }
          }
        }
      });
    });

  </script>

  <style type="text/css">
    .head{
      background-color: #342c29;
      height:70px;

    }

    .logoPng{
      float:left;
      padding-top:12px;
      padding-left:5px;
    }
    .logoText{
      color: white;
      font-size: 16px;
      font-weight: bold;
      float:left;
      padding-top: 35px;
      padding-left: 5px;
    }

    .login{
      color: white;
      font-size: 16px;
      float:right;
      padding-top: 40px;
      padding-right: 5px;
    }
  </style>
</head>
<body>
<!-- 	easyui-layout 布局空间
		split:true" 是否可拖拽
		fit="true" 填充满父容器
-->
<div class="easyui-layout" fit="true">
  <div class="head" data-options="region:'north'">
    <!--logo -->
    <div class="logoPng">
      <img src="static/images/logo.png">
    </div>
    <div class="logoText">
      测试系统
    </div>
    <div class="login">
      欢迎${sessionScope.loginUser.name}登陆本系统。<a href="logout">退出登录</a>
    </div>
  </div>
  <div data-options="region:'west'" title="功能菜单" style="width:150px;">
    <ul class="mainMenu" id="mainMenu">
    </ul>
  </div>
  <div data-options="region:'south'" style="height:30px;text-align: center;font-size: 14px;padding-top: 4px">版权 2019</div>
  <div data-options="region:'center',title:'控制台'">
    <!-- tab页签 -->
    <div id="mainUI" class="easyui-tabs" fit="true">
      <div title="首页" style="text-align: center;font-size: 24px;">
        欢迎使用本系统<br/><br/>
        系统版本V1.0
      </div>
    </div>
  </div>
</div>
</body>
</html>
